<template>
  <div class="customer_set">
    <div class="main">
      <el-tabs v-model="activeName" @tab-click="switchTab">
        <el-tab-pane label="公司设置" name="set">
          <SetCard ref="setCard" :active_name="String(activeName)" />
        </el-tab-pane>
        <el-tab-pane label="公司级别" name="level">
          <LevelCard ref="levelCard" :active_name="String(activeName)" />
        </el-tab-pane>
        <el-tab-pane label="公司分类" name="type">
          <TypeCard ref="typeCard" :active_name="String(activeName)" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SetCard from './components/SetCard/index.vue'
  import LevelCard from './components/LevelCard/index.vue'
  import TypeCard from './components/TypeCard/index.vue'
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { useRoute } from 'vue-router'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.setting.customerSet,
  })

  const route = useRoute()
  const activeName = route.query.active == undefined ? 'set' : route.query.active

  const setCard = ref()
  const levelCard = ref()
  const typeCard = ref()

  // 导航切换
  const switchTab = (tab: TabsPaneContext) => {
    if (tab.props.name == 'set') {
      setCard.value.getSet()
    }
    if (tab.props.name == 'level') {
      levelCard.value.getLevelData()
    }
    if (tab.props.name == 'type') {
      typeCard.value.getTypeData()
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
